<template>
    <div class="sjzxRightTop">
        <ThemeTitle :title="title" />
        <div v-for="(item, index) in themePicList" :key="index">
            <!-- 每个title -->
            <div class="title">
                <div class="titleWord">{{ item.parent }}</div>
                <div class="titleImg">
                    <img src="images/sjzx/threeTrangle.png" alt="" />
                </div>
            </div>
            <!-- 每行专题图 -->
            <div class="themePic">
                <div
                    v-for="(item1, index1) in item.child"
                    :class="{
                        themePicItem: true,
                        themePicItemActive: themePicItemActive == item1.sign,
                    }"
                    :key="index1 + 'child'"
                    @click="themeItemClick(item1)"
                >
                    <div class="dataName">{{ item1.name }}</div>
                    <div class="contentLine">
                        <img src="/images/sjzx/trangle.png" alt="" />
                    </div>
                    <div class="num">{{ item1.num }}</div>
                </div>
            </div>
            <div class="spliteLine">
                <img src="images/sjzx/spliteLine.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle.vue";
import { provide, ref } from "vue";
import { useStore } from "vuex";
import { ElNotification } from "element-plus";

export default {
    components: {
        ThemeTitle,
    },
    setup() {
        let store = useStore();
        let title = provide("title", "数据分析");
        let themePicList = ref([
            {
                parent: "专题图",
                child: [
                    {
                        name: "防汛防风",
                        num: 9,
                        sign: "专题图_防汛防风",
                        component: "FxffThematicMap",
                    },
                    {
                        name: "森林火险监测",
                        num: 1,
                        sign: "专题图_森林火情",
                        component: "FireThematicMap",
                    },
                    // {name:"综合",num:1,sign:"专题图_综合",component:'SjzxRightThemePicTotal'}
                ],
            },
            {
                parent: "专题报告",
                child: [
                    {
                        name: "森林火情",
                        num: 2,
                        sign: "专题报告_森林火情",
                        component: "FireMonitorReport",
                    },
                    {
                        name: "突发事件",
                        num: 2,
                        sign: "专题报告_突发事件",
                        component: "EmergencyReport",
                    },
                ],
            },
            {
                parent: "专题报表",
                child: [
                    {
                        name: "防汛防风",
                        num: 11,
                        sign: "专题报表_防汛防风",
                        component: "FxffForm",
                    },
                    {
                        name: "生产安全事故",
                        num: 2,
                        sign: "专题报表_生产安全事故",
                        component: "ProductionDangerAccidentForm",
                    },
                ],
            },
            {
                parent: "统计分析",
                child: [
                    {
                        name: "历史火情监测",
                        num: "",
                        sign: "统计分析_历史火情监测",
                        component: "HistoryFireMonitor",
                    },
                    {
                        name: "历史生产安全事故",
                        num: "",
                        sign: "统计分析_历史生产安全事故",
                        component: "HistoryProductionDangerAccident",
                    },
                    {
                        name: "历史火灾",
                        num: "",
                        sign: "统计分析_历史火灾",
                        component: "HistoryFire",
                    },
                ],
            },
        ]);
        let themePicItemActive = ref("专题图_防汛防风");
        const themeItemClick = item => {
            themePicItemActive.value = item.sign;
            store.commit("changeSjzxRightCurrentComponent", item.component);
            if(store.state.userRegion=="海南省"){
                store.commit("changeSjzxLeftCurrentComponent", "SjzxBasic");
            }else{
                store.commit("changeSjzxLeftCurrentComponent", "");
            }
            if (item.sign == "统计分析_历史灾害") {
                store.commit(
                    "changeSjzxLeftCurrentComponent",
                    "LeftHistoryDisaster"
                );
            } else if (item.sign == "专题图_防汛防风") {
                store.commit("changeThematicMapName", "防汛防风");
            } else if (item.sign == "专题图_森林火情") {
                store.commit("changeThematicMapName", "森林火险区等级");
            }
        };
        return {
            title,
            themePicList,
            themePicItemActive,
            themeItemClick,
        };
    },
};
</script>

<style lang="stylus" scoped>
.sjzxRightTop >>> .title {
    font-size: vw(18);
    color: #00DEFF;
    display: flex;
    margin-top: vh(10);
}

.sjzxRightTop >>> .title .titleImg {
    margin-left: vw(10);
}

.sjzxRightTop {
    font-size: vw(20);
    width: vw(370);

    .themePic {
        margin-top: vh(5);
        display: flex;
        padding-left: vw(15);
        flex-wrap: wrap;
        justify-content:space-between;
        .themePicItem {
            display: flex;
            flex-shrink: 0;
            justify-content: space-around;
            background: url('/images/sjzx/item.png') no-repeat;
            background-size: 100% 100%;
            width: vw(160);
            height: vh(37);
            line-height: vh(37);
            font-size: vw(14);
            margin-right: vw(10);
            cursor: pointer;
            margin-top: vh(10);
        }

        .themePicItemActive {
            div {
                color: #00F4FD;
            }
        }
    }

    .spliteLine {
        width: vw(370);
        margin-top: vh(-5);
        display:none;
    }
}
</style>
